<template>
	<view class="page">
		<view class="my-top">
			<view class="imgheader flex flex-align flex-center">
				<image src="/static/logo.jpg" mode=""></image>
			</view>
			<view class="address">{{community_info.community_name}}</view>
			<view class="addCity">{{community_info.community_address}}</view>
		</view>
		<view class="shequList">
			<view class="title">选择所属小区</view>
			<view class="list">
				<view class="mendian flex flex-align" v-for="(item,index) in dataList" :key="index" v-if="dataList.length!=0" @click="setect(item)">
					<view class="center">
						<view class="titles flex flex-align flex-bt">
							<view class="l">{{item.name}}</view>
						</view>
						<view class="address">{{item.address}}</view>
						<view class=" flex flex-align" v-for="(items,ins) in item.deliveryman" :key="ins">
							<view class="">配送员:</view>
							<image :src="items.headimg" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin: 0 4rpx;"></image>
							<view class="">{{items.nickname}}</view>
							<view class="" style="font-size: 28rpx;">{{items.phone}}</view>
						</view>
					</view>
					<view class="right">
						<tui-icon :name="selectData.id==item.id?'circle-fill':'circle'" :color="selectData.id==item.id?'#f20':'#999'" :size="24"></tui-icon>
					</view>
				</view>
				<view class="empty-box" v-if="dataList.length==0" style="padding-top: 100rpx;">
					<image src="/static/ic_nodata.png" mode=""></image>
					<view class="" style="color: #999;">暂无数据</view>
				</view>
			</view>
			<view class="flex flex-align flex-center" style="margin-top: 50rpx;" v-if="dataList.length!=0">
				<tui-button shape="square" type="danger" width="300rpx" @click="isRule=true">提交</tui-button>
			</view>
			
		</view>
		<view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
				<view class="cu-dialog" style="width: 560rpx;">
					<view class=" bg-white mains">
						<view class="list flex flex-align">
							<view class="left">姓名</view>
							<view class="right"><input type="text" v-model="name" placeholder="请输入姓名" /></view>
						</view>
						<view class="list flex flex-align">
							<view class="left">手机号</view>
							<view class="right"><input type="number" v-model="phone" placeholder="请输入手机号" /></view>
						</view>
						<view class="list flex">
							<view class="left" style="padding-top: 10rpx;">地址</view>
							<view class="right">
								<textarea v-model="address" placeholder="请输入详细地址(*栋*单元*号)" name="" id=""></textarea>
							</view>
						</view>
						<view class="flex flex-align flex-center" style="margin-top: 50rpx;">
							<tui-button shape="square" type="danger" width="300rpx" @click="submite">提交</tui-button>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	
		data() {
			return {
				community_info:'',
				isRule:false,
				name:'',
				phone:'',
				address:'',
				selectData:''
			};
		},
		onLoad() {
			let that = this
			that.getList()
		},
		onShow() {
			let that = this
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			getList(){
				let that = this
				that.tui.request("api.auth.plot/plotInfo", "POST", {}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.community_info=res.data.community_info
						that.dataList = res.data.plot_info
					}
				}).catch((res) => {
				
				})
			},
			setect(e){
				let that = this
				that.selectData = e
			},
			submite(){
				let that = this
				that.isRule =false
				if(that.selectData==""){
					that.tui.toast('请先选择所在小区')
					return
				}
				if(that.name==""){
					that.tui.toast('姓名不能为空')
					return
				}
				if(that.phone==""){
					that.tui.toast('手机号不能为空')
					return
				}
				if(that.address==""){
					that.tui.toast('地址不能为空')
					return
				}
				that.tui.request("api.auth.plot/plotAddress", "POST", {plot_id:that.selectData.id,address:that.address,name:that.name,phone:that.phone}, false, false, true).then((res) => {
					that.tui.toast(res.info)
					if (res.code == 1) {
						setTimeout(function(){
							uni.navigateBack()
						},1000)
					}
				}).catch((res) => {
				
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	page{
		width: 100%;
		// height: 100%;
		background-color: #fff;
	}
	.my-top{
		position: relative;padding-top: 40rpx;padding-bottom: 100rpx;
		width: 100%;
		
		background: linear-gradient(to left,$base,$base);
		border-radius: 0 0 50% 50% / 0% 0% 20% 20%;
		.selsecInput{background: #fff;border-radius: 60rpx;width: 630rpx;margin: 0 auto;padding: 15rpx 20rpx;
			.city{margin: 0 6rpx;
				view{font-weight: bold;}
			}
		}
		.imgheader{
			image{width: 200rpx;height: 200rpx;border-radius: 100%;}
		}
		.address{text-align: center;color: #fff;font-size: 34rpx;margin: 40rpx 0;}
		.addCity{text-align: center;color: #fff;font-weight: bold;font-size: 28rpx;width: 500rpx;margin: 0 auto;line-height: 1.6;}
		.selectShequ{position: absolute;bottom: -50rpx;left: 50%;line-height: 100rpx;text-align: center;background: #fff;border-radius: 100rpx;width: 400rpx;margin-left: -200rpx;font-size: 30rpx;box-shadow:1px 1px 5px 1px #ccc}
	}
	.shequList{margin-top: 50rpx;
		.title{font-weight: bold;font-size: 42rpx;border-left: 4px solid #f20;padding-left: 20rpx;}
		.list{
			.mendian{padding: 30rpx;margin: 30rpx 0;border-bottom: 1px solid #eee;line-height: 1.6;
				.left{margin-right: 20rpx;
					image{width: 150rpx;height: 150rpx;}
				}
				.center{width:100%;
					.titles{
						.l{font-size: 34rpx;}
						.r{color: #f20;}
					}
					.team{margin: 10rpx 0;color: #999;}
				}
			}
		}
	}
	.rule-win{
		.mains{padding: 30rpx;
			.list{border-bottom: 1px solid #eee;padding: 10rpx 0;
				.left{width: 90rpx;text-align: right;margin-right: 20rpx;}
				.right{
					input{text-align: left;height: 80rpx;}
					textarea{width: 400rpx;text-align: left;font-size: 26rpx;padding: 10rpx 0;height: 100rpx;}
				}
			}
			.list:last-child{border-bottom: none;}
		}
	}
</style>